<template>
  <basic-container>
    <XmTable :config="tableConfig" :noWatchParams="noWatchParams" class="table" ref="table">
      <div slot="filter">
        <el-form class="fl mb-15" :inline="true">
          <el-form-item label="后台单号">
            <el-input
              v-model="noWatchParams.xmbzNo"
              size="medium"
              placeholder="后台单号"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="司机名称">
            <el-input
              v-model="noWatchParams.userName"
              size="medium"
              placeholder="用户全名"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="城市">
            <CitySelect
              filterable
              clearable
              v-model="noWatchParams.cityId"
              size="medium"
            >
            </CitySelect>
          </el-form-item>
          <el-form-item label="状态">
            <XmSelect
              class="w-120"
              filterable
              clearable
              v-model="noWatchParams.status"
              size="medium"
              :options="transferAbnormalStatusList"
            >
            </XmSelect>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker
              v-model="startAndEndTime"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              :default-time="['00:00:00', '23:59:59']"
              value-format="yyyy-MM-dd HH:mm:ss"
              format="yyyy-MM-dd HH:mm:ss"
              :picker-options="pickerOptions"
              size="medium"
              align="right"
              clearable
              @change="handleTimeChange"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="search"
              size="small"
              icon="el-icon-search"
            >查询</el-button>
            <el-button class="ml-10" @click="reset" size="small" icon="el-icon-delete">清空</el-button>
          </el-form-item>
        </el-form>
      </div>

      <template slot="column-cakeLength" slot-scope="{data}">
        <span>{{ data.transferCakeInfos && data.transferCakeInfos.length }}</span>
      </template>
      <template slot="column-transferCakeInfos" slot-scope="{data}">
        <div>
          {{
            data.transferCakeInfos && 
            Array.from(new Set(data.transferCakeInfos.map(item => item.warehouseName))).join('，')
          }}
        </div>
      </template>
      <template slot="column-status" slot-scope="{data}">
        <el-tag size="small" :type="statusStyleMap[data.status]">
          {{ statusLabelMap[data.status] }}
        </el-tag>
      </template>
      <template slot="column-operate" slot-scope="{data}">
        <el-button type="text" icon="el-icon-search" @click="approval(data)">
          审核
        </el-button>
      </template>
    </XmTable>
    <approvalDialog ref="approvalDialog" @submit="search"></approvalDialog>
    
  </basic-container>
</template>

<script>
import tableConfig from './config/table'
import approvalDialog from './components/approvalDialog'
import { downloadByUrl } from '@/util/file'
import { transferAbnormalStatusList } from '@/const'
export default {
  data() {
    const statusStyleMap = {
      1: 'info',
      2: 'danger',
      3: 'success',
    }
    const statusLabelMap = {
      1: '待审核',
      2: '驳回',
      3: '通过',
    }
    return {
      tableConfig,
      statusStyleMap,
      statusLabelMap,
      transferAbnormalStatusList,
      noWatchParams: {
        timeStart: this.dayjs(new Date())
          .format("YYYY-MM-DD 00:00:00"),
        timeEnd: this.dayjs(new Date())
          .format("YYYY-MM-DD 23:59:59"),
        xmbzNo: '',
        cityId: '',
        userName: '',
        status: '',
      },
      startAndEndTime: [this.dayjs(new Date())
          .format("YYYY-MM-DD 00:00:00"), this.dayjs(new Date())
          .format("YYYY-MM-DD 23:59:59")],
      pickerOptions:{
        onPick: (obj) => {
          this.pickerMinDate = new Date(obj.minDate).getTime();
        },
        disabledDate:(time)=> {
          if (this.pickerMinDate) {
            const day1 =  31 * 24 * 3600 * 1000;
            let maxTime = this.pickerMinDate + day1;
            let minTime = this.pickerMinDate - day1;
            return time.getTime() > maxTime || time.getTime()<minTime;
          }
        }
      },
    }
  },
  methods: {
    search() {
      this.$refs.table.fetch()
    },
    reset() {
      this.startAndEndTime = []
      this.noWatchParams = {
        timeStart: '',
        timeEnd: '',
        xmbzNo: '',
        cityId: '',
        userName: '',
        status: '',
      }
      this.$nextTick(() => {
        this.search()
      })
    },
    approval(data) {
      this.$refs.approvalDialog.show({data})
    },
    handleTimeChange() {
      this.noWatchParams.timeStart = this.startAndEndTime && this.startAndEndTime[0]
      this.noWatchParams.timeEnd = this.startAndEndTime && this.startAndEndTime[1]
    },
  },
  created() {
  },
  components: {
    approvalDialog,
  }
}
</script>

<style lang="scss" scoped>
.table {
  .el-form-item {
    margin-bottom: 0px;
  }
}
</style>
